import React, { Component } from 'react';
import Collection from './Collection';
import LinkTitle from '../common/LinkTitle';
import { PROTYPES } from '../../utils/constant';
import { Tabs, Modal } from 'antd';
const TabPane = Tabs.TabPane;
export default class MyOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: 'all',
      selectedRowKeys: []
    };
  }
  componentDidMount() {
    this.props.getList();
  }
  changePane(key) {
    this.setState({
      activeKey: key
    });
    this.props.filter({ type: key });
  }
  deleteItem = item => {
    const { delCollect } = this.props;
    Modal.confirm({
      title: '确认删除该收藏吗',
      centered: true,
      okText: '删除',
      cancelText: '取消',
      onOk: () => this.clearSelect([item.id])
    });
  };
  /**删除选中 */
  deleteArr = () => {
    const { selectedRowKeys } = this.state;
    const arr = [].concat(selectedRowKeys);
    const { delCollect } = this.props;
    let centered = true;
    if (selectedRowKeys.length == 0) {
      Modal.warning({ title: '没有选中项', centered });
    } else {
      Modal.confirm({
        title: '确认删除选中收藏吗',
        centered,
        okText: '删除',
        cancelText: '取消',
        onOk: () => this.clearSelect(arr)
      });
    }
  };
  clearSelect(arr) {
    const { delCollect } = this.props;
    delCollect(arr);
    setTimeout(() => {
      this.setState({
        selectedRowKeys: []
      });
    });
  }
  /**清空选中 */
  removeArr = () => {
    const { list, delCollect } = this.props;
    let arr = list.filter(item => item.state == 1);
    delCollect(arr);
  };

  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };
  render() {
    const { activeKey, selectedRowKeys } = this.state;
    const { list, loading } = this.props;
    let pagination = list && list.length > 10 ? true : false;
    const tabs = [
      { tab: '全部收藏', key: 'all' },
      { tab: '景点', key: PROTYPES.attractions },
      { tab: '演出', key: PROTYPES.show },
      { tab: '赛事', key: PROTYPES.contest },
      { tab: '体验', key: PROTYPES.experience }
    ];
    return (
      <div className="userCWrapper myOrder myCollect">
        <div className="ltWrapper">
          <LinkTitle title="我的收藏" list={list} />
        </div>
        <div className="actions">
          <a className="btn primary" onClick={() => this.deleteArr()}>
            删除选中
          </a>
          <a
            className="btn default"
            style={{ marginLeft: '0.6rem' }}
            onClick={() => this.removeArr()}
          >
            清空失效
          </a>
        </div>
        <Tabs
          animated={{ inkBar: true, tabPane: false }}
          onChange={key => this.changePane(key)}
          activeKey={activeKey}
        >
          {tabs.map((item, index) => (
            <TabPane tab={item.tab} key={item.key}>
              <Collection
                list={list}
                pagination={pagination}
                loading={loading}
                deleteItem={this.deleteItem}
                onSelectChange={this.onSelectChange}
                selectedRowKeys={selectedRowKeys}
              />
            </TabPane>
          ))}
        </Tabs>
      </div>
    );
  }
}
